<template>
	<view class="container">
		<Page :page-function="getNoticePage" v-model:dataList="noticeList" v-model:page="page">
			<view class="notice" v-for="item in noticeList" :key="item.id">
				<view class="title">
					{{ item.title || getDriverNoticeTypeNameByCode(item.type) }}
				</view>
				<view class="time">
					{{ formatDatetime(item.createTime) }}
				</view>
				<view class="content">
					{{ item.content }}
				</view>
			</view>
		</Page>
	</view>
</template>

<script setup>
import Page from '@/components/page.vue'
import { getNoticePage } from '@/api/notice.js'
import { ref, reactive } from 'vue'
import { formatDatetime } from '@/utils/datetimeUtil.js'
import { getDriverNoticeTypeNameByCode } from '@/utils/enums.js'

const noticeList = ref([])

const page = reactive({
	pageNum: 1,
	pageSize: 10
})

</script>

<style scoped lang="scss">

* {
	box-sizing: border-box;
}

.container {
	min-height: 100vh;
	.notice {
		padding: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.title {
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		.time {
			color: #666;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
		.content {
			padding-top: 30rpx;
			border-top: 1rpx solid #ccc;
		}
		
	}
	
}

</style>